export default {
	name: "dashboard",
	data() {
		return {
			chartData: {},
			mapData: {},
			pieSettings: {},
			pieExtend: {},
			mapSettings: {},
			extend: {},
			dataList: [
				{
					icon: "el-icon-s-custom",
					title: "访问人数",
					quantity: ""
				},
				{
					icon: "el-icon-message",
					title: "消息",
					quantity: ""
				},
				{
					icon: "el-icon-money",
					title: "收益",
					quantity: ""
				},
				{
					icon: "el-icon-shopping-cart-full",
					title: "购物车",
					quantity: ""
				}
			]
		};
	},
	created() {
		this.initData();
		this.setData();
	},
	computed: {
		width() {
			return 350 * this.widthRatio + "px";
		},
		height() {
			return 231 * this.heightRatio + "px";
		},
		mapWidth() {
			return 975 * this.widthRatio + "px";
		},
		mapHeight() {
			return 702 * this.heightRatio + "px";
		}
	},
	methods: {
		setData() {
			this.$set(this.dataList[0], "quantity", "102,400");
			this.$set(this.dataList[1], "quantity", "81,212");
			this.$set(this.dataList[2], "quantity", "9,280");
			this.$set(this.dataList[3], "quantity", "14,600");
		},
		initData() {
			this.chartData = {
				columns: ["类型", "销量"],
				rows: [
					{"类型": "衬衫", "销量": 5},
					{"类型": "羊毛衫", "销量": 20},
					{"类型": "雪纺衫", "销量": 36},
					{"类型": "裤子", "销量": 10},
					{"类型": "高跟鞋", "销量": 10},
					{"类型": "袜子", "销量": 20}
				]
			};
			this.mapData = {
				columns: ["位置", "税收", "人口", "面积"],
				rows: [
					{"位置": "吉林", "税收": 123, "人口": 123, "面积": 92134},
					{"位置": "北京", "税收": 1223, "人口": 2123, "面积": 29234},
					{"位置": "上海", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "天津", "税收": 1023, "人口": 2323, "面积": 20234},
					{"位置": "重庆", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "江苏", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "山东", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "河南", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "湖北", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "湖南", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "江西", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "陕西", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "山西", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "河北", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "安徽", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "广东", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "福建", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "辽宁", "税收": 2123, "人口": 1243, "面积": 94234},
					{"位置": "浙江", "税收": 4123, "人口": 5123, "面积": 29234}
				]
			};
			//根据显示器分辨率自适应计算画布大小
			this.pieSettings = {
				label: {
					fontSize: 16 * this.widthRatio
				},
				radius: 70 * this.widthRatio,
				offsetY: 130 * this.heightRatio
			};
			this.mapSettings = {
				zoom: 0.96,
				mapGrid: {
					top: 10,
					left: 20,
					right: 20,
					bottom: 10,
					containLabel: true
				}
			};
			this.pieExtend = {
				legend: {
					itemWidth: 25 * this.widthRatio,
					itemHeight: 15 * this.widthRatio,
					itemGap: 10 * this.widthRatio,
					orient: "horizontal", x: "left", y: "top", padding: [5, 5, 0, 5],
					textStyle: {
						fontSize: 15 * this.widthRatio
					}
				},
				grid: {
					top: 50,
					left: 10,
					right: 15,
					bottom: 5,
					containLabel: true
				}
			};
			this.extend = {
				title: {
					text: "在Vue中使用echarts",
					textStyle: {
						fontSize: 22 * this.widthRatio,
						x: "left"
					}
				},
				legend: {
					itemWidth: 25 * this.widthRatio,
					itemHeight: 15 * this.widthRatio,
					orient: "horizontal", x: "right", y: "top", padding: [5, 10, 0, 0],
					textStyle: {
						fontSize: 15 * this.widthRatio
					}
				},
				series: {
					label: {show: true, position: "top"}
				},
				grid: {
					top: 40,
					left: 10,
					right: 15,
					bottom: 10,
					containLabel: true
				}
			};
		},
		test() {
			this.fetch.test().then(
				(res) => {
					if (res.data && res.data.success) {
						console.log(res);
					}
				}, (error) => {
					this.clearCookie();//清空cookie
					this.message.error(error.data.message);
				}
			);
		}
	}
};
